import {Button, Layout} from 'antd';
import MyMenu from "../../components/MyMenu/index.jsx";
import {MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import {useState} from "react";
import MyHeader from "../../components/MyHeader/index.jsx";
import MyContent from "../../components/MyContent/index.jsx";

const {Header, Footer, Sider, Content} = Layout;

const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#7b79f1',
};
const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    // backgroundColor: '#0958d9',
};
const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#fff',
};
const footerStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#7b79f1',
};
const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100vw',
    height: "100vh",
    maxWidth: '100%',
};


const WorkPlace = () => {
    const [collapsed, setCollapsed] = useState(false);
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    return (
        <>
            <Layout style={layoutStyle}>
                <Sider width="200px" style={siderStyle} collapsed={collapsed}>
                    <div className="logo" style={{width: collapsed && '50px'}}>
                        template@LG
                    </div>
                    {/* 菜单*/}
                    <MyMenu/>
                    {/*底部折叠按钮*/}
                    <Button
                        type="primary"
                        onClick={toggleCollapsed}
                        style={{
                            marginBottom: 16,
                        }}
                    >
                        {collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                    </Button>
                </Sider>

                <Layout>
                    <Header style={headerStyle}>
                        <MyHeader/>
                    </Header>
                    <Content style={contentStyle}>
                        <MyContent/>
                    </Content>
                    <Footer style={footerStyle}>
                        madeByLG
                    </Footer>
                </Layout>
            </Layout>
        </>
    )
}

export default WorkPlace
